{extend name="layouts/main" /}
{block name="link"}{/block}
{block name="css"}
<style>
	.ibox {
		clear: both;
		margin-bottom: 25px;
		margin-top: 0;
		padding: 0;
	}
	.ibox-title {
		background-color: #ffffff;
		border-color: #e7eaec;
		border-image: none;
		border-style: solid solid none;
		border-width: 4px 0px 0;
		color: inherit;
		margin-bottom: 0;
		padding: 14px 15px 7px;
		min-height: 48px;
	}
	.ibox-content {
		background-color: #ffffff;
		color: inherit;
		padding: 15px 20px 20px 20px;
		border-color: #e7eaec;
		border-image: none;
		border-style: solid solid none;
		border-width: 1px 0px;
	}
	.float-e-margins .btn {
		margin-bottom: 5px;
	}
	.btn-info {
		background-color: #23c6c8;
		border-color: #23c6c8;
		color: #FFFFFF;
	}
	.btn-org {
		color: #fff;
		background-color: #F39800;
		border-color: #F39800;
	}
	.btn {
		border-radius: 3px;
	}
	.btn {
		display: inline-block;
		padding: 6px 12px;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		cursor: pointer;
		user-select: none;
		background-image: none;
		border: 1px solid transparent;
	}
	a {
		text-decoration: none;
	}
	.form-control, .single-line {
		background-color: #FFFFFF;
		background-image: none;
		border: 1px solid #e5e6e7;
		border-radius: 1px;
		color: inherit;
		/* display: block; */
		padding: 6px 12px;
		transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
		width: 100%;
		font-size: 14px;
	}
	.input-group {
		position: relative;
		display: table;
		border-collapse: separate;
		float: left;
		margin-bottom: 5px;
	}
	.panel-heading {
		padding: 0px 10px 0px 15px;
		border-bottom: 1px solid transparent;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	.panel-body {
		padding: 0px 15px 15px 15px;
	}
	.input-group-addon {
		background-color: #fff;
		border: 1px solid #E5E6E7;
		color: inherit;
		font-size: 14px;
		font-weight: 400;
		line-height: 1;
		padding: 6px 12px;
		text-align: center;
		width: 1%;
	}
	.text-danger {
		color: #ed5565;
	}
	/* .table {
		width: 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}
	table {
		background-color: transparent;
	}
	table {
		border-spacing: 0;
		border-collapse: collapse;
	}
	table {
		display: table;
		border-collapse: separate;
		border-spacing: 2px;
		border-color: grey;
	}
	thead {
		display: table-header-group;
		vertical-align: middle;
		border-color: inherit;
	}
	tr {
		display: table-row;
		vertical-align: inherit;
		border-color: inherit;
	}
	table,table tr th, table tr td { border:1px solid #DCDCDC; }
	table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;} */
	.zengyan{width: 267px;}
</style>
{/block}
{block name="content"}
<div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
	<div class="layui-body layui-tab-content site-demo site-demo-body" style="top: 0px;left: 0px;">
		<div class="layui-tab-item layui-show">
			<div class="layui-main">
				<div id="LAY_preview">
					<div class="layui-fluid" style="position: relative;margin: 0 auto;padding: 0 0px;">
						<div class="layui-card" style="overflow-y: hidden;">
							<div class="layui-tab layui-tab-card">
								<ul class="layui-tab-title">
									<li><a href="{:url('search_engine',array('tab'=>1,'stime'=>$stime,'etime'=>$etime,'status'=>$status))}">关键词</a></li>
									<li class="layui-this"><a href="{:url('search_engine',array('tab'=>2,'stime'=>$stime,'etime'=>$etime,'status'=>$status))}">搜索引擎</a></li>
								</ul>
								<div class="layui-tab-content" style="height: 100%;">
									<div class="layui-tab-item layui-show">
										<div class="panel-body">
											<header class="panel-heading" style='line-height: 30px;'>
												<font class='text-info'>{$title['t1']}</font>
												<div class="search_titw60">
													<div class="input-group search-form">
														<div style='float: left; margin-right: 5px;'>
															<a href="{$dataurl['time1']}"
															class='btn btn-info {if condition="$status eq 1"}btn-org{/if}'>今天</a>
															<a href="{$dataurl['timezt']}"
															class='btn btn-info {if condition="$status eq 2"}btn-org{/if}'>昨天</a>
															<a href="{$dataurl['time7']}"
															class='btn btn-info {if condition="$status eq 3"}btn-org{/if}'>最近七天</a>
															<a href="{$dataurl['time30']}"
															class='btn btn-info {if condition="$status eq 4"}btn-org{/if}'>最近30天</a>
															<a href="{$dataurl['timed']}"
															class='btn btn-info {if condition="$status eq 5"}btn-org{/if}'>本月</a>
														</div>
														<div class="input-group input-large custom-date-range" data-date="" data-date-format="">
															<input name="stime" value="{$stime|default=''}" placeholder="开始日期" class="zengyan form-control layer-date" id="date1">
															<span class="input-group-addon">To</span>
															<input name="etime" value="{$etime|default=''}" placeholder="结束日期" class="zengyan form-control layer-date" id="date2">
															<span class="input-group-btn">
																<a class="btn btn-default"type="button" id="search" url="{:url('search_engine',array('tab'=>2))}">
																	<i class="fa fa-search"></i>
																</a>
															</span>
														</div>
													</div>
												</div>
												<div class='clear'></div>
											</header>

											<div class="layui-row">
												<div class="layui-col-md6">
													<section class="panel">
														<div class="panel-body">
															<table class="table layui-table">
																<thead>
																	<tr>
																		<th>排名</th>
																		<th>搜索引擎</th>
																		<th>搜索次数</th>
																	</tr>
																</thead>
																<tbody>
																	{if condition="$kdata"}
																	{volist name="kdata" key='k' id="info"}
																	<tr>
																		<td>{$k}</td>
																		<td>{$info['name']}</td>
																		<td>{$info['value']}</td>
																	</tr>
																	{/volist}
																	{else /}
																	<tr>
																		<td colspan="3" class="text-center">aOh! 暂时还没有数据!</td>
																	</tr>
																	{/if}
																</tbody>
															</table>
														</div>

													</section>
												</div>
												<div class="layui-col-md6">
													<div id="main" style="height: 300px; width: 100%; top: 45px;"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
	layui.use(['form','laydate','jquery'], function(){
		var form = layui.form //表单
			,laydate = layui.laydate //日期
			,$ = layui.jquery;
		// 日期
		laydate.render({
			elem: '#date1'
			// ,type: 'datetime'
		});
		laydate.render({
			elem: '#date2'
			// ,type: 'datetime'
		});
	});
</script>
<script src="__STATIC__/addons/stats/echarts/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var etitle =<?php echo $echdata['etitle'];?>;
    var edata =<?php echo $echdata['edata'];?>;
    // 指定图表的配置项和数据
    var option = {
    	title : {
    		text : '搜索引擎访问来源',
    		x : 'center'
    	},
    	tooltip : {
    		trigger : 'item',
    		formatter : "{a} <br/>{b} : {c} 次 ({d}%)"
    	},
    	legend : {
    		orient : 'vertical',
    		left : 'left',
    		data : etitle
    	},
    	series : [ {
    		name : '访问来源',
    		type : 'pie',
    		radius : '55%',
    		center : [ '50%', '55%' ],
    		data : edata,
    		itemStyle : {
    			emphasis : {
    				shadowBlur : 10,
    				shadowOffsetX : 0,
    				shadowColor : 'rgba(0, 0, 0, 0.5)'
    			}
    		}
    	} ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
{/block}